<template>
  <div class="checkedStaffList">
    <p class="checkedStaffTit">已选</p>
    <div class="checkedList zdy-scroll">
      <div class="checkedStaffItem" v-for="item in checkedStaffListData.checkedStaffList" :key="item.key">
        <!-- <span class="checkAvatar">
          <i>{{getFirstName(item.title)}}</i>
        </span> -->
        <span class="checkStaffName">{{ item.title }}</span>
        <img src="./images/deleteStaffImg.svg" alt="删除" class="deleteStaff" @click="deleteStaff(item.key)" />
      </div>
    </div>,
  </div>
</template>

<script>
import { reactive,watch } from 'vue'
export default {
  name: 'CheckedCustomerList',
  props: {
    checkedStaffList: {
      type: Array,
      default: []
    }
  },
  setup(props, context) {
    const checkedStaffListData = reactive({
      checkedStaffList: [] //已选中的成员列表
    })

    //获取成员名字（最后两个字）
    const getFirstName = name => {
      return name.substring(name.length - 2)
    }

    //移除指定成员
    const deleteStaff = id => {
      context.emit('deleteStaff', id)
    }

    watch(
      () => props.checkedStaffList,
      list => {
        checkedStaffListData.checkedStaffList = list
        console.log('子组件 已经选用工单位checkedStaffListData', list)
      },
      {
        immediate: true
      }
    )



    return {
      checkedStaffListData,
      getFirstName,
      deleteStaff
    }
  }
}
</script>

<style lang="less" scoped>
.checkedStaffList {
  padding-top: 7px;
  height: 100%;
  .checkedStaffTit {
    padding: 0px 33px 0px 24px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    margin-bottom: 24px;
  }
  .checkedList {
    height: calc(100% - 7px - 22px - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 26px 0px 24px;
    .checkedStaffItem {
      position: relative;
      margin-bottom: 24px;
      .checkAvatar {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #5975fb;
        color: #ffffff;
        border-radius: 50%;
        text-align: center;
        font-size: 13px;
        margin-right: 8px;
        white-space: nowrap;
        i {
          display: block;
          font-style: normal;
          transform: scale(0.6);
        }
      }
      .checkStaffName {
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - 24px - 8px - 30px);
        height: 24px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.65);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .deleteStaff {
        position: absolute;
        right: 0px;
        width: 24px;
        height: 24px;
        padding: 5px;
        cursor: pointer;
        &:hover {
          opacity: 0.7;
        }
        &:active {
          opacity: 0.95;
        }
      }
    }
  }
}
</style>
